<script lang="ts" setup>
import {onMounted, ref, reactive} from 'vue'
import {RegionSelects} from 'v-region'
import villageData from '../../assets/village.json'; // 注意根据实际路径调整
import { UploadFilled } from '@element-plus/icons-vue'

const findLabelByValue = (targetValue, options) => {
  for (const option of options) {
    if (option.value === targetValue) {
      return option.label;
    }
    if (option.children) {
      const foundLabel = findLabelByValue(targetValue, option.children);
      if (foundLabel) {
        return foundLabel;
      }
    }
  }
  return null;
};
const villageOptions = villageData;
const selectedVillage = ref([]);
var requestData=ref([]);
const props1 = {
  checkStrictly: true,
}
const handleCascaderChange = (value, selectedLabels) => {
  if (value == null) {
    return;
  }
  requestData.value = value.map((val, index) => ({
    // level: index + 1, // 级数
    // value: val,       // 选中的值
    label: findLabelByValue(val,villageOptions), // 查找并添加对应的label
  }));
  console.log(requestData.value);
};
const applypoorData = ref({
  name: '',
  idcard: '',
  cityName:'',
  countyName:'',
  townName:'',
  villageName:'',
  poor: '',
  risk1: '',
  risk2: '',
  risk3: '',
  risk4: '',
  risk5: '',
  risk6: '',
})
class fClass
{
  sriskid =''
  secondname = ''
}

const poor = ref({
  value:'0'
})
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref('')
const value6 = ref('')

const firstCategorys1 = reactive(
    {
      data: [] as fClass[]
    })
const firstCategorys2 = reactive(
    {
      data: [] as fClass[]
    })
const firstCategorys3 = reactive(
    {
      data: [] as fClass[]
    })
const firstCategorys4 = reactive(
    {
      data: [] as fClass[]
    })
const firstCategorys5 = reactive(
    {
      data: [] as fClass[]
    })
const firstCategorys6 = reactive(
    {
      data: [] as fClass[]
    })


import {applyPoorFirstRiskService} from '../../api/applypoor.js'

const firstRisk = async () => {
  let result = await applyPoorFirstRiskService();
  result.data.forEach(item => {
    if (item.firstname === "医保情况") {
      firstCategorys1.data.push(item);
    }
    if (item.firstname === "水利情况") {
      firstCategorys2.data.push(item);
    }
    if (item.firstname === "住房情况") {
      firstCategorys3.data.push(item);
    }
    if (item.firstname === "紧急灾难") {
      firstCategorys4.data.push(item);
    }
    if (item.firstname === "健康情况") {
      firstCategorys5.data.push(item);
    }
    if (item.firstname === "教育情况") {
      firstCategorys6.data.push(item);
    }
  });
  // 如果需要，你可以在这里打印firstCategorys.data
  // firstCategorys.data.push(...result.data)
  //console.log(firstCategorys.value)
}
onMounted(() => {
  firstRisk();
});
import {applypoorService} from '../../api/applypoor.js'

const onSubmit = async () => {
  applypoorData.value.poor = poor.value.value;
  applypoorData.value.risk1 = value1.value;
  applypoorData.value.risk2 = value2.value;
  applypoorData.value.risk3 = value3.value;
  applypoorData.value.risk4 = value4.value;
  applypoorData.value.risk5 = value5.value;
  applypoorData.value.risk6 = value6.value;
  console.log(applypoorData.value);
  for (let i=0;i<requestData.value.length;i++){
    switch (i) {
      case 0:
        applypoorData.value.cityName = requestData.value[i]['label']
        break;
      case 1:
        applypoorData.value.countyName = requestData.value[i]['label']
        break;
      case 2:
        applypoorData.value.townName = requestData.value[i]['label']
        break;
      case 3:
        applypoorData.value.villageName = requestData.value[i]['label']
        break;
    }
  }
  // applypoorData.value.area = selectedVillage.value;
  let result = await applypoorService(applypoorData.value);
  if (result.code == 0) {
    alert(result.msg ? result.msg : '成功')
  } else {
    alert('失败')
  }
}
</script>
<template>
  <el-card class="el-card__body">
    <el-form :model="applypoorData" label-width="auto" style="max-width: 600px">
      <el-form-item label="姓名：">
        <el-input v-model="applypoorData.name"/>
      </el-form-item>
      <el-form-item label="身份证号：">
        <el-input v-model="applypoorData. idcard"/>
      </el-form-item>
      <el-form-item  label="地址：" >
        <el-cascader class=".el-radio__inner"
                     v-model="selectedVillage"
                     :options="villageOptions"
                     clearable
                     :props="props1"
                     @change="handleCascaderChange"
                     style="width: 400px;"

        />
      </el-form-item>
      <div>
        <el-form-item label="是否申请贫困">
          <el-radio-group v-model="poor.value" class="group" >
            <el-radio value="1">贫困</el-radio>
            <el-radio value="0">不贫困</el-radio>
          </el-radio-group>
        </el-form-item>
        <div style="margin-top: 20px;">
          <el-row>
            <el-col :span="4">
              <el-form-item label="风险点选择：" v-if="poor.value=='1'"/>
            </el-col>
            <el-col :span="18">
              <el-form-item label="医疗情况：" v-if="poor.value=='1'">
                <el-select placeholder="请选择" v-model="value1"  class="width">
                  <el-option v-for="(item,i) in firstCategorys1.data"
                             :key="i"
                             :label="item.secondname"
                             :value="item.sriskid">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="水利情况：" v-if="poor.value=='1'">
                <el-select placeholder="请选择" v-model="value2"  class="width">
                  <el-option v-for="(item,i) in firstCategorys2.data"
                             :key="i"
                             :label="item.secondname"
                             :value="item.sriskid">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="住房情况：" v-if="poor.value=='1'">
                <el-select placeholder="请选择" v-model="value3"  class="width">
                  <el-option v-for="(item,i) in firstCategorys3.data"
                             :key="i"
                             :label="item.secondname"
                             :value="item.sriskid">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="紧急情况：" v-if="poor.value=='1'">
                <el-select placeholder="请选择" v-model="value4"  class="width">
                  <el-option v-for="(item,i) in firstCategorys4.data"
                             :key="i"
                             :label="item.secondname"
                             :value="item.sriskid">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="健康情况：" v-if="poor.value=='1'">
                <el-select placeholder="请选择" v-model="value5"  class="width">
                  <el-option v-for="(item,i) in firstCategorys5.data"
                             :key="i"
                             :label="item.secondname"
                             :value="item.sriskid">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="教育情况：" v-if="poor.value=='1'">
                <el-select placeholder="请选择" v-model="value6"  class="width">
                  <el-option v-for="(item,i) in firstCategorys6.data"
                             :key="i"
                             :label="item.secondname"
                             :value="item.sriskid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-form-item>
        <el-button class="button" type="primary" plain @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>

.group {
  margin-top: 10px;
}
.width{
  width:50%;
}

.el-radio__inner {
  position: relative;
  vertical-align: bottom; /* 或 top、bottom，取决于你的需求 */
  margin-right: 5px; /* 右侧添加一些间距，使文本不紧贴按钮 */
}

.el-card__body {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.button{
  margin-left:200px;
  width:100px;
}
</style>